上一讲我们掌握了文件路由的各种使用方法，并用 layouts 特性实现快速页面布局。本节我们继续完善个人博客的功能和用户体验，添加一些图片和 CSS 样式，并且引入目前比较流行的 CSS 库：Tailwindcss。

资源目录

Nuxt 项目存放样式、图片等静态资源的目录默认有两个：

• public：会被作为应用程序根目录提供给用户，打包工具不会处理，访问时添加/即可，例如：/logo.png。

xml
复制代码<template>
  <img src="/logo.png" />
</template>

• assets：打包工具会处理，访问时以~开头，例如：~/assets/logo.png。

xml
复制代码<template>
  <img src="~/assets/logo.png" />
</template>

除了~，Nuxt3 中还有一些默认别名：

json
复制代码{
  "~~": "/<rootDir>",
  "@@": "/<rootDir>",
  "~": "/<rootDir>",
  "@": "/<rootDir>",
  "assets": "/<rootDir>/assets",
  "public": "/<rootDir>/public"
}

下面我们引入一个作者头像图片试一下，layouts/default.vue：

xml
复制代码<template>
  <div>
    <nav>
      导航栏
      <img class="avatar" src="~/assets/avatar.png" alt="avatar" />
    </nav>
    <slot />
  </div>
</template>
<style scoped>
.avatar {
  width: 50px;
  border: 1px solid rgb(218, 218, 218);
  border-radius: 50%;
}
</style>

可以正常使用!

全局样式

有两种方式可以配全局样式：

• 配置文件 nuxt.config.ts；
• app.vue 中引入。

nuxt.config.ts 配置全局样式:

arduino
复制代码export default defineNuxtConfig({
  css: [
    'assets/global.css'
  ]
})

创建 assets/global.css：

css
复制代码a {
  text-decoration: none;
  color: #3370ff;
}

app.vue 中引入全局样式

也可以在 app.vue 中引入样式：

xml
复制代码<script>
import "~/assets/global.css";
</script>

效果如下：

使用 CSS 预处理器：Sass

如果要使用 Sass，安装 sass 即可：

csharp
复制代码yarn add sass -D

对应的，重命名 global.css 为 global.scss，并添加一个变量测试一下：

css
复制代码$linkColor: #3370ff;

a {
  text-decoration: none;
  color: $linkColor;
}

修改配置文件，nuxt.config.ts：

arduino
复制代码export default defineNuxtConfig({
  css: [
    'assets/global.scss'
  ]
})

效果如初~

全局样式导入

如果想在 pages 和 components 里面使用 Sass 变量，则需要配置全局样式导入。

首先创建 assets/_variables.scss，移动变量到它里面。然后添加一个 vite 配置，nuxt.config.ts

php
复制代码// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: ["assets/global.scss"],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "~/assets/_variables.scss";',
        },
      },
    },
  },
});

下面就可以在组件页面中使用这些变量了，[id].vue：

xml
复制代码<style scoped lang="scss">
p {
  color: $linkColor
}
</style>

效果如下：

整合 Tailwindcss

现在原子化 css 已经非常流行了，例如 Tailwindcss、Windicss 等，能够提升开发效率和体验。我们在后续项目开发中也将使用 Tailwindcss，因此这里给大家演示一下如何整合。

整合 Tailwindcss

安装 @nuxtjs/tailwindcss 模块：

css
复制代码yarn add --dev @nuxtjs/tailwindcss

添加配置项，nuxt.config.ts：

css
复制代码{
  modules: [
    '@nuxtjs/tailwindcss'
  ]
}

配置全局样式和变量

Tailwind 官方强烈建议单独使用 postcss，不要和其他 Sass 等预处理器混用。因此我们将替换掉前面的实现。

添加全局样式文件，请注意路径和文件名必须是：assets/css/tailwind.css

scss
复制代码@import '_variables.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

a {
  text-decoration: none;
  color: var(--link-color);
}

_variables.css 就是前面的 _variables.scss，同时修改内容为：

css
复制代码:root {
  --link-color: #3370ff;
}

最后，修改组件中使用方式，[id].vue:

xml
复制代码<style scoped>
p {
  color: var(--link-color)
}
</style>

除了头像部分，这是因为 tailwind 默认样式导致，我们添加一些 class 修正一下：

ini
复制代码<img
    class="w-[50px] border-[1px] border-slate-300 rounded-full inline-block"
    src="~/assets/avatar.png"
    alt="avatar"
/>

效果基本如初~

样式调整

最后我们调整导航样式，让它看起来更像个导航~ default.vue：

css
复制代码<nav
  class="border-b border-slate-200 px-5 py-2 flex items-center justify-between"
>
  <h1 class="text-2xl font-bold">Nuxt3 in Action</h1>
  <img
    class="w-[50px] border-[1px] border-slate-300 rounded-full inline-block"
    src="~/assets/avatar.png"
    alt="avatar"
  />
</nav>

效果还不错：

阅读全文